<template>
  <svg>
    <g :transform="'translate(' + translateX + ',' + translateY + ')rotate('+ rotate +')'" class="cursor-pointer">
      <rect width="28" height="12" x="2" y="2" :stroke="color" stroke-width="4" fill="none"></rect>
      <line x1="2" y1="8" x2="28" y2="8" :stroke="color" stroke-width="4"></line>
      <line x1="20" y1="2" x2="20" y2="12" :stroke="color" stroke-width="4"></line>
      <polygon points="30,2 30,14 44,8" :fill="color" :stroke="color" stroke-width="4"></polygon>
    </g>
  </svg>
</template>
<script>
export default {
  props: {
    color: {
      type: String,
      default: '#FB819D'
    },
    translateX: { // x轴偏移，默认0
      type: Number,
      default: 0
    },
    translateY: { // y轴偏移，默认0
      type: Number,
      default: 0
    },
    rotate: {  // z轴旋转角度,注意不是原地旋转，需要根据x、y轴偏移来调整
      type: Number,
      default: 0
    }
  }
}
</script>
<style lang="less" scoped>
svg {
  transform-origin: center center;
}
</style>